import React from 'react'
import { Route, Link } from 'react-router-dom'
import Home from './components/Home'
import Detail from './components/Detail'
export default function App() {
  return (
    <div>
      App
      <br />
      <Link to="/home">home</Link>
      <Link to="/detail">detail</Link>
      <hr />
      {/* 3. 配置前端路由规则: 
        path表示路径
        component 表示路径对应的组件
        一个Route表示一条前端路由规则. Route写在哪里,对应的组件就渲染在哪里
      
      */}
      {/* react-router-dom中如果路径发生变化,所有的前端路由都会被遍历,进行匹配
        匹配规则: 
           模糊匹配(默认): pathname以path开头(浏览器地址栏的路径就是pathname,Route组件path属性的值就是path)

           pathname: /ab   no
           pathname: /a/bc no
           pathname: /a/b/c ok
           

           path: /a/b

           精确匹配: pathname和path完全一致
           开启精确匹配的方式: 在Route上添加exact属性,注意: 有exact的是精确匹配,没有的还是模糊匹配

      */}
      <Route path="/" component={Home} exact></Route>
      <Route path="/home" component={Home}></Route>
      <Route path="/detail" component={Detail}></Route>
      <hr />
    </div>
  )
}
